<!-- 仓库管理 -->
<template>
  <div class="container-ymm">
    <div class="header-ymm">
      <el-input
        v-model="listQuery.keyWords"
        type="text"
        class="seach-input"
        size="small"
        placeholder="输入师傅名称,编码或手机号"
      >
        <i slot="prefix" class="el-input__icon el-icon-search"/>
      </el-input>
      <el-button type="primary" size="small" @click="getList()">查询</el-button>
      <el-button type="danger" size="small" @click="visit()">邀请师傅</el-button>
    </div>
    <div class="table-ymm">
      <el-table v-loading="isloading" :data="tableData" style="width: 100%" border>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button type="text" @click="updateDialog(scope.row)">编辑</el-button>
            <!-- v-show="checkPermission('worker:update:juri')"-->
          </template>
        </el-table-column>
        <el-table-column label="师傅编号">
          <template slot-scope="scope">
            <span>{{ scope.row.maintainWorkerCode }}</span>
          </template>
        </el-table-column>
        <el-table-column label="师傅姓名">
          <template slot-scope="scope">
            <span>{{ scope.row.maintainWorkerName }}</span>
          </template>
        </el-table-column>
        <el-table-column label="手机号">
          <template slot-scope="scope">
            <span>{{ scope.row.maintainWorkerMobile }}</span>
          </template>
        </el-table-column>
        <el-table-column label="是否审核通过">
          <template slot-scope="scope">
            <span>{{ scope.row.maintainWorkerApprove === true ? '是' : '否' }}</span>
          </template>
        </el-table-column>
        <el-table-column label="地址">
          <template slot-scope="scope">
            <span>{{ scope.row.maintainSiteFullAddressText }}</span>
          </template>
        </el-table-column>
        <el-table-column label="合作状态">
          <template slot-scope="scope">
            <span>{{ scope.row.maintainWorkerCooperation === true ? '是' : '否' }}</span>
          </template>
        </el-table-column>
        <el-table-column label="师傅级别">
          <template slot-scope="scope">
            <span>{{ scope.row.maintainWorkerLevel === 'worker_level_part-time' ? '全职' : '兼职' }}</span>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="table-ymm-bt">
      <!-- :pager-count="table.page_count" -->
      <el-pagination
        v-show="total>0"
        :current-page="listQuery.page"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="listQuery.count"
        :total="total"
        background
        layout="sizes, prev, pager, next,total"
        @current-change="handleCurrentChange"
        @size-change="handleSizeChange"
      />
    </div>

    <el-dialog
      :visible.sync="centerDialogVisible"
      title="邀请师傅"
      width="25%"
      center>

      <div slot="footer">
        <canvas id="qrcode" style="margin-top:-45px;" />
        <div style="margin:20px 0px;">手机扫描二维码分享给师傅，师傅注册即可完成添加师傅</div>
      </div>
    </el-dialog>

    <component :is="modal" :modal-data="modalData" :modal-static-data="{closeChildAndRefresh}" @close="closeChild"/>
  </div>
</template>
<script>
import Add from './dialog/Add.vue'
import {
  getWorkerList,
  getVisitUrl
} from '@/api/webpoint/worker'
import { getUserInfo } from '@/api/login'
import QRCode from 'qrcode'

export default {
  data() {
    return {
      centerDialogVisible: false,
      userid: null, // 权限对应
      modal: null,
      modalData: {},
      listQuery: {
        offset: null,
        page: 1,
        count: 10,
        keyWords: ''
      },
      isloading: true,
      tableData: [],
      total: 1
    }
  },
  created() {
    this.getPermission()
  },
  mounted() {
    console.warn('mounted complete')
    this.getList()
  },
  methods: {
    useqrcode(data) {
      var qrcode = document.getElementById('qrcode')
      let poineerId = ''
      if (data.poineerId) {
        poineerId = data.poineerId
      } else {
        poineerId = ''
      }
      let QrPath = ''
      if (window.location.href.indexOf('dev') !== -1) {
        QrPath = 'https://m.test.yunyamooc.com/activity/identity'
      } else {
        QrPath = 'https://m.banshouhui.com/activity/identity'
      }
      QRCode.toCanvas(qrcode, '' + QrPath + '?pioneerId=' + poineerId + '&maintainSiteId=' + data.maintainSiteId + '', function(error) {
        if (error) {
          console.error(error)
        } else {
          console.log('' + QrPath + '?pioneerId=' + poineerId + '&maintainSiteId=' + data.maintainSiteId + '')
        }
      })
    },
    closeChildAndRefresh() {
      this.modal = null
      this.listQuery.page = 1
      this.getList()
    },
    /**
       * 邀请师傅
       */
    visit() {
      this.centerDialogVisible = true
      getVisitUrl().then(res => {
        this.useqrcode(res.data)
      })
    },
    // 分页
    handleCurrentChange(val) {
      console.warn(val)
      this.listQuery.page = val
      this.getList()
    },
    handleSizeChange(val) {
      this.listQuery.count = val
      this.getList()
    },
    closeChild() {
      this.modal = null
    },
    updateDialog(data) {
      this.modalData = { type: 'update', data: data }
      this.modal = Add
    },
    /**
       * 分页查询
       */
    getList() {
      this.listQuery.offset = (this.listQuery.page - 1) * this.listQuery.count
      console.warn(this.listQuery)
      getWorkerList(this.listQuery).then(res => {
        console.warn(res.data)
        if (res.data.data) {
          this.tableData = res.data.data
          this.total = res.data.count
          this.isloading = false
        }
      })
    },
    // 权限
    getPermission() {
      var arr = document.cookie.split('; ') // 这里显示的格式需要切割一下自己可输出看下
      for (var i = 0; i < arr.length; i++) {
        var arr2 = arr[i].split('=') // 再次切割
        // 判断查找相对应的值
        if (arr2[0] === 'token') {
          this.userid = arr2[1]
        } else {
          this.userid = 1
        }
      }
      if (localStorage.getItem(this.userid)) {
        return
      }

      getUserInfo().then(response => {
        if (response.data.status === 'ok') {
          localStorage.setItem(this.userid, JSON.stringify(response.data.data.permissions))
        }
      }).catch(error => {
        console.log(error)
      })
    },

    checkPermission(value) {
      if (value) {
        if (localStorage.getItem(this.userid).indexOf(value) >= 0) {
          return true
        } else {
          return false
        }
      } else {
        return false
      }
    }

  }
}
</script>
